/*
 *@description:音乐播放器
 *@Author:@rennan
 *@Date:2024-07-13 10:57:30
 *@version: V1.0.0
*/
<template>
  <div class="player_box">
    <div class="my_palyer">
      <!-- 音乐图片及音乐名等 -->
      <div class="player_left">
        <div id="box">
          <img
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F9b3a290b-f742-47cc-8a45-103f83690966%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1723449528&t=798bdfbde4761663b1bd35c930fe2e68"
            alt="">
        </div>
        <div class="music_name">call me by your name</div>
      </div>
      <!-- 播放按钮及菜单 -->
      <div class="player_right">
        <div class="player_btn" @click="playMusic">
          <van-icon v-if="!isPlayer" name="play-circle-o" size="28" />
          <van-icon v-else name="pause-circle-o" size="28" />
        </div>
        <div class="player_menu" @click="clickMenu">
          <van-icon name="bars" size="28" />
        </div>
      </div>
    </div>

    <van-popup v-model:show="showRight" position="right" :style="{ width: '40%', height: '80%' }" />
  </div>
</template>
<script setup>
import { ref } from 'vue'

let isPlayer = ref(true)
let isRotate = ref(true)
// 弹出
let showRight = ref(false)

const playMusic = () => {
  isPlayer.value = !isPlayer.value
  // 调用旋转事件
  toggleRotation()
}
// 旋转事件
function toggleRotation() {
  isRotate.value = !isRotate.value;
  if (isRotate.value) {
    document.getElementById('box').classList.remove('paused');
  } else {
    document.getElementById('box').classList.add('paused');
  }
}

// 点击音乐列表
const clickMenu = () => {
  console.log('点击了音乐列表');
  showRight.value = true
}

</script>
<style scoped>
.player_box {
  height: 60px;
  position: fixed;
  padding: 10px;
  bottom: 0;
  background-color: #fff;
  border-top: 1px solid #ccc;
  width: 100%;
  box-sizing: border-box;
}

.my_palyer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.my_palyer .player_left,
.my_palyer .player_right {
  display: flex;
  align-items: center;
}

.player_left img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.music_name {
  color: #000;
  font-size: 15px;
  font-weight: 500;
  margin-left: 5px;
}

.player_btn {
  margin-right: 10px;
}

#box {
  animation: musicRotate 2s infinite linear;
}

#box.paused {
  animation-play-state: paused;
}

/* 定义音乐图片旋转的动画 */
@keyframes musicRotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
</style>